<template>
  <view :class="{'is-animation': isAnimation}" class="p-pop-x">
    <view class="box">
      <view class="bg" />
      <view class="content">
        <view class="title">天降福利</view>
        <view class="desc">最高可享优惠￥{{maxDiscountAmount}}</view>
        <view class="list">
          <view v-if="subsidyAmount" class="item">
            <view class="tag">补贴</view>
            <view class="dl">
              <view class="dt">
                <view class="price">{{ subsidyAmount }}</view>
              </view>
              <view class="dd">恭喜您获得活动补贴</view>
            </view>
          </view>
          <template v-if="couponVoList && couponVoList.length">
            <view v-for="(item, index) in couponVoList" :key="index" class="item">
              <view class="tag">优惠券</view>
              <view class="dl">
                <view class="dt">
                  <view class="price">{{ item.couponAmount }}</view>
                </view>
                <view class="dd">{{ item.couponType === 2 ? '恭喜您获得 专属优惠券' : `满${item.transactionAmount}使用` }}</view>
              </view>
            </view>
          </template>
        </view>
      </view>
      <view class="bottom">
        <view class="tips">购物补贴、优惠券可叠加使用</view>
        <view class="button" @click="handleReceive">一键领取并下单</view>
      </view>
    </view>

    <view class="_close" @click="handleClose">
      <x-icon name="icon-003" size="70" color="#fff" />
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';

export default {
  name: 'PContent',
  components: {
    XIcon
  },
  props: {
    product: {
      type: Object,
      default: () => {}
    },
    coupon: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isAnimation: false
    };
  },
  computed: {
    subsidyAmount() {
      return this.product?.subsidyAmount;
    },
    couponVoList() {
      return this.coupon?.couponVoList;
    },
    maxDiscountAmount() {
      let amount = this.subsidyAmount || 0;
      if (this.couponVoList?.length) {
        amount += this.couponVoList[0].couponAmount;
      }
      return this.$tools.formatNumber(amount);
    }
  },
  created() {
    this.isAnimation = true;
  },
  methods: {
    handleClose() {
      this.$emit('close');
    },
    handleReceive() {
      this.$emit('receive');
    }
  }
};
</script>

<style lang="scss" scoped>
.p-pop-x{
  height: 100vh; display: flex; align-items: center; flex-direction: column; justify-content: center; width: 590px; margin: 0 auto;
  .box{
    position: relative; width: 590px; height: 876px; opacity: 0;
    .bg{ background-color: #FC4543; position: absolute; left: 0; bottom: 0; width: 100%; height: 550px; z-index: 1; border-radius: 50px;}
    .content{
      position: absolute; left: -50px; bottom: 100px; width: 676px; height: 876px; background: cdn('/images/pic-032.png') no-repeat; background-size: cover; z-index: 2;
      .title{ color: #FB4341; font-size: 50px; text-align: center; font-weight: bold; position: absolute; width: 100%; left: 0; top: 250px;}
      .desc{ color: #8C3B0D; font-size: 26px; text-align: center; position: absolute; width: 100%; left: 0; top: 325px;}
      .list{
        position: absolute; width: 454px; left: 118px; top: 390px; height: 420px; padding-bottom: 60px; overflow-y: auto;
        .item{
          height: 124px; background: #fff; display: flex; align-items: center; border-radius: 14px; margin-bottom: 20px; overflow: hidden; position: relative;
          .tag{ background: #FEE3A0;border-radius: 14px 0; color: #8F4E20; font-size: 20px; line-height: 1; position: absolute; left: 0; top: 0; padding: 5px 0; width: 85px; text-align: center;}
          .dl{ display: flex; align-items: center; flex: 1;}
          .dt{ min-width: 120px; padding: 0 10px; display: flex; align-items: center; justify-content: center;}
          .price{
            color: #FB3C3A; font-size: 40px; font-weight: bold; line-height: 1;
            &:before{ content: '￥'; font-size: 20px; padding-bottom: 8px;}
          }
          .dd{ flex: 1; color: #A37300; height: 70px; display: flex; align-items: center; justify-content: center; border-left: 2px dashed #FEE3A0; text-align: center; font-size: 26px;}
        }
      }
    }
    .bottom{
      width: 590px; height: 272px; position: absolute; left: 0; bottom: 0; z-index: 4; background: cdn('/images/pic-033.png') no-repeat; background-size: cover;
      .tips{ text-align: center; color: #FFF4DA; position: absolute; width: 100%; left: 0; top: 90px; font-size: 28px;}
      .button{ position: absolute; white-space: nowrap; left: 50%; bottom: 46px; transform: translate3d(-50%, 0, 0); padding: 15px 40px; background: #FDFAD7; box-shadow: inset 0 12px 4px #FEFCEA, inset 0px -10px 0px #FBF5B6; border-radius: 41px; color: #3B2603; font-size: 36px;}
    }
  }
  ._close{ text-align: center; padding-top: 40px;}

  &.is-animation{
    .box{ opacity: 1; animation: zoomInBox .4s ease-in forwards;}
  }
}

@keyframes zoomInBox {
  0% {
    opacity: 0;
    transform:scale3d(.1, .1, .1)
  }
  80% {
    transform:scale3d(1.2, 1.2, 1.2)
  }
  to {
    opacity: 1;
    transform:scale3d(1, 1, 1)
  }
}
</style>
